<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>我的收藏</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-cache" />
  
  <meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Expires" content="0"> 

  <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">

  <link rel="stylesheet" href="assets/css/amaze.min.css">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/fonts2/iconfont.css">
<link rel="stylesheet" href="assets/css/app.css">
  <script src="assets/js/jquery.min.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>

<style>
	body{
		padding-bottom:50px;
		position:static;
	}
	.search-content{
		padding: 1rem;
		background-color: #f5f5f5;
	}
	.am-content{
		background:#FFFFFF;
		border-top:1px solid #d6d6d6;
	}
	
	.history{
		background:#FFFFFF;
		border-top:1px solid #d6d6d6;
		display:none;
	}
	
	input{
		border-radius: 5px 5px;
		border: 1px solid #E4DADA;
		line-height: 3rem;
		width: 100%;
		padding: 0px 1rem;
	}

	.icon-search{
		position: absolute;
		right: 20px;
		margin-top: 2px;
		color:#dcdcdc;
		padding: 0px 1rem;
	}
	
	.icon-loadd{
		position: absolute;
		right: 20px;
		margin-top: 2px;
		color:#dcdcdc;
		padding: 0px 1rem;
	}
	.icon-refresh{
		color:#dcdcdc;
	}
	
	table{
		width:100%;
	}
	.item{
		padding: .8rem;
		border-bottom:1px solid #EFEEEE;
		color:#9b9b9b;
	}
	.number{
		color:#fab34d;
	}
	
	.item .title{
		color:#3d4245;
	}
	.item .title .spanright{
		float:right;
		color:#cccccc;
		font-size:1.2rem;
	}
	.item .title .iconfont{
		color:#5eacf6;
	}

	.item .content .line{
		padding: .8rem;
		height: inherit;
		background: transparent;
		font-size: 1.4rem;
		border-top:1px solid #EFEEEE;
	}
	.am-btn-default{
		background-color: #FFFFFF;
	    width: 80%;
	    margin-top: 20px;
	    border-radius: 5px;
	}
	.footer{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		z-index:100;
		background-color:#f5f5f5;
		border-top:1px solid #EFEEEE;
		height:50px;
		padding:0px 2%;
	}
	.head{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		z-index:100;
	}
</style>

</head>
<body>
<header class="demo-bar head"><a href="javascript:void(0);" id="back2" onclick="$('#sy').click();" class="icon iconfont icon-left demo-icon-home"></a><h1>我的收藏</h1></header>
	<div class="am-content" style="margin-top:50px;">
		<div id="list">
			
		</div>
	</div>
	
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="streamModal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">
				线路<a href="javascript: void(0)" class="am-close am-close-spin"
					data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd">
				
				<input type="hidden" id="lineId"/>
				<input type="hidden" id="siteId"/>
				
				<div id="streamContent">
					
				</div>
						
				<div>
					<button class="am-btn am-btn-default" data-am-modal-close>取消</button>
				</div>
			</div>
		</div>
	</div>
	
	<footer class="footer">
		<div id="sy" style="width:32%;float:left;text-align:center;color:#9b9b9b;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-bus" style="font-size:24px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">线路查询</span></li>
			</ul>
		</div>
		<div id="xlgh" style="width:32%;float:left;text-align:center;color:#9b9b9b;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-guiji" style="font-size:24px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">线路规划</span></li>
			</ul>
		</div>
		<div id="wdsc" style="width:32%;float:left;text-align:center;color:#1a7de2;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-user" style="font-size:22px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">我的收藏</span></li>
			</ul>
		</div>
	</footer>
	

	<script id="list-site-templ" type="text/x-handlebars-template">
			<div class="item" data-siteId = "{{siteId}}">
				
				<div class="title">
					<span><i class="icon iconfont icon-lubiao"></i>{{siteName}}</span>
					<span class="spanright"></span>
				</div>
				<div class="content" data-siteId="{{siteId}}">
					
				</div>
				
			</div>
	</script>
	
	

	<script id="list-line-templ" type="text/x-handlebars-template">
			<div class="line">
				<span onclick="selectStream({{lineId}},this);">{{lineName}}</span>
				<span style="float:right">
					<img src="images/qxshouc.png" width="20xp" height="20px" onclick="shouc(this, {{lineId}})" style="display:none;"/>
					<img src="images/shouc.png" width="20xp" height="20px" onclick="qxshouc(this, {{lineId}})"/>
				</span>
			</div>
	</script>
		

	<script type="text/javascript">
		$.asyncrequest = function(url, params,success,error){
			url = host+url;
			$.ajax({
				url : url,
				type : 'post',
				dataType : 'json',
				async:false,
				data : params,
				success :success ,
				error : error
			});
		}
		
		var query = $.getLocationQueryData();
		var phone = query.phone;
		var longitude = query.longitude;
		var latitude = query.latitude;
		
		function flushList(url,params){
			//获取收藏的站点
			$.list(url, params,function(data){
				//var data = {"retCode":1, "result":[{"siteId":1, "lineId":1},{"siteId":1, "lineId":2},{"siteId":2, "lineId":2}]};
				if(data.retCode!=0){
					$.alert(data.message);
					$.AMUI.progress.done();
					return;
				}
				if(data.result.length<=0) {
					$("#list").html('<div align="center" style="padding:10px;color:#cccccc;" ">暂无收藏记录</div>');
				}
				
				for(var i=0;i<data.result.length;i++) {
					var siteId = data.result[i].siteId;
					var lineId = data.result[i].lineId;
					var siteName;
					var lineName;
					var url = "taxi/json/nanda?url="+escape("getSiteInfo.action?siteId="+siteId+"&lineId="+lineId);
					var params={};
					$.asyncrequest(url, params, function(siteInfo){
						siteInfo = JSON.parse(siteInfo);
						if(siteInfo.retCode!=0){
							$.alert("查询站点信息失败");
						}
						siteName = siteInfo.result[0].siteName;
					});
					
					url = "taxi/json/nanda?url="+escape("busLineInfo.action?lineId="+lineId+"&typeId=&lineName=");
					params={};
					$.asyncrequest(url, params, function(lineInfo){
						lineInfo = JSON.parse(lineInfo);
						if(lineInfo.retCode!=0){
							$.alert("查询线路信息失败");
						}
						lineName = lineInfo.result[0].lineName;
					});
					
					var collection = {siteId:siteId, siteName:siteName, lineId:lineId, lineName:lineName};
					var lineTemplate = Handlebars.compile($('#list-line-templ').html());
					var lineHtml = lineTemplate(collection);
					var siteContent = $('#list .item[data-siteId='+siteId+']');
					if(siteContent.length<1) {
						var myTemplate = Handlebars.compile($('#list-site-templ').html());
						var html = myTemplate(collection);
						$("#list").append(html);
					}
					var lineContent = $('#list .item[data-siteId='+siteId+'] .content');
					lineContent.append(lineHtml);
				}
				$.AMUI.progress.done();
			});
			
		}
		
		
		function selectStream(lineId, obj){
			$('#lineId').val(lineId);
			
			var url = "taxi/json/nanda?url="+escape("busLineInfo.action?lineId="+lineId+"&typeId=&lineName=");
			var params = {};
			var selectSiteId = $(obj).parent().parent().attr("data-siteId");
			$.request(url,params,function(data) {
				data = JSON.parse(data);
				if(data.retCode != 0){
					$('#streamContent').html('获取失败');
					return;
				}
				data = data.result[0];
				//上行
				var startSiteName = data.startSiteName;
				var endSiteName = data.endSiteName;
				//下行
				var startSiteName1 = data.startSiteName1;
				var endSiteName1 = data.endSiteName1;
				
				var detailUrl = "busDetail.html?lineId="+lineId+"&siteId="+selectSiteId+"&phone="+phone+
				"&longitude="+longitude+"&latitude="+latitude +"&stream=";
				var html = '<div style="font-size: 2rem;margin-top: 2rem;"><a href="javascript:openDetail(\''+detailUrl+'0\');">'+(startSiteName+'-'+endSiteName)+'</a></div>';
				if(startSiteName1 && endSiteName1){
					html += '<div style="font-size: 2rem;margin-top: 2rem;"><a href="javascript:openDetail(\''+detailUrl+'1\');">'+(startSiteName1+'-'+endSiteName1)+'</a></div>';
				}
				$('#streamContent').html(html);
			});
								
			$('#streamContent').html('<i class="icon iconfont icon-loadd am-animation-spin"></i>获取中...');
			$('#streamModal').modal('open');
		}
		
	
		var url = '';
		var params = {};
		url = 'taxi/json/getBusCollectionList';
		params.phone = phone;
		flushList(url,params);
		
		function openDetail(url){
        	
			$('#streamModal').modal('close');
        		location.href=url;
       	 }
	
		//收藏、取消收藏
		function shouc(obj, lineId) {
			if(!phone || phone=='') {
				$.alert("手机号不能为空");
				return;
			}
			var url = "taxi/json/addBusCollection";
			var siteId = $(obj).parent().parent().parent().attr("data-siteId");
			var params = {lineId:lineId, siteId:siteId, phone:phone};
			$.request(url,params,function(data) {
				if(data.retCode != 0){
					$.alert('收藏失败');
					return;
				}
				$(obj).hide();
				$(obj).next().show();
			});
		}

		function qxshouc(obj, lineId) {
			if(!phone || phone=='') {
				$.alert("手机号不能为空");
				return;
			}
			var url = "taxi/json/delBusCollection";
			var siteId = $(obj).parent().parent().parent().attr("data-siteId");
			var params = {lineId:lineId, siteId:siteId, phone:phone};
			$.request(url,params,function(data) {
				if(data.retCode != 0){
					$.alert('取消收藏失败');
					return;
				}
				$(obj).hide();
				$(obj).prev().show();
				$.alert("取消成功");
				setTimeout(function(){
					window.location.href = location.href;
				},800);
			});
		}
		
	$("#sy").click(function(){
		location.href = "bus.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
	});
	
	$("#xlgh").click(function(){
		location.href = "bustransfer.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
	});
	
	//-->
	</script>
	

 
</body>
</html>
